<template>
  <div class="advanced-search-container">
    <!-- 搜索表单 -->
    <el-card class="search-form-card">
      <template #header>
        <div class="card-header">
          <h3>高级搜索</h3>
          <el-button @click="resetForm" size="small">重置</el-button>
        </div>
      </template>

      <el-form :model="searchForm" label-width="100px" class="search-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="关键词">
              <el-input v-model="searchForm.keyword" placeholder="输入搜索关键词" clearable @keyup.enter="performSearch">
                <template #append>
                  <el-button @click="showSuggestions" :loading="loadingSuggestions">
                    <el-icon>
                      <Search />
                    </el-icon>
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="知识空间">
              <el-select v-model="searchForm.spaceId" placeholder="全部空间" clearable filterable @change="onSpaceChange">
                <el-option v-for="space in spaces" :key="space.spaceId" :label="space.spaceName"
                  :value="space.spaceId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="文档类型">
              <el-select v-model="searchForm.documentType" placeholder="全部类型" clearable>
                <el-option label="Markdown" value="markdown" />
                <el-option label="文本文档" value="text" />
                <el-option label="Word文档" value="docx" />
                <el-option label="PDF文档" value="pdf" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="创建者">
              <el-input v-model="searchForm.creatorUsername" placeholder="全部创建者" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="文件夹">
              <el-cascader v-model="searchForm.folderId" :options="folderTree" :props="cascaderProps" placeholder="根目录"
                clearable filterable />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="创建时间">
              <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="不限制开始时间"
                end-placeholder="不限制结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="onDateRangeChange" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="搜索范围">
              <el-checkbox-group v-model="searchForm.searchScope">
                <el-checkbox label="title">标题</el-checkbox>
                <el-checkbox label="content">内容 <el-text type="info"
                    size="small">(仅搜索txt和md格式文档)</el-text></el-checkbox>
                <el-checkbox label="description">描述</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="performSearch" :loading="searching">
                <el-icon>
                  <Search />
                </el-icon>
                搜索
              </el-button>
              <el-button @click="resetForm">重置</el-button>
              <el-button @click="saveSearchTemplate">保存搜索模板</el-button>
              <el-dropdown @command="loadSearchTemplate" v-if="searchTemplates.length > 0">
                <el-button>
                  加载模板
                  <el-icon class="el-icon--right">
                    <ArrowDown />
                  </el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item v-for="template in searchTemplates" :key="template.id" :command="template">
                      {{ template.name }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 搜索建议 -->
    <el-card v-if="suggestions.length > 0" class="suggestions-card">
      <template #header>
        <h4>搜索建议</h4>
      </template>
      <div class="suggestions">
        <el-tag v-for="suggestion in suggestions" :key="suggestion" class="suggestion-tag"
          @click="applySuggestion(suggestion)">
          {{ suggestion }}
        </el-tag>
      </div>
    </el-card>

    <!-- 搜索结果 -->
    <el-card class="results-card" v-if="hasSearched">
      <template #header>
        <div class="results-header">
          <h4>搜索结果 ({{ searchResults.length }} 个)</h4>
          <div class="result-actions">
            <el-select v-model="sortBy" @change="sortResults" size="small">
              <el-option label="相关性" value="relevance" />
              <el-option label="创建时间" value="createdAt" />
              <el-option label="更新时间" value="updatedAt" />
              <el-option label="文档名称" value="documentName" />
            </el-select>
            <el-button-group size="small">
              <el-button :type="viewMode === 'list' ? 'primary' : ''" @click="viewMode = 'list'">
                <el-icon>
                  <List />
                </el-icon>
              </el-button>
              <el-button :type="viewMode === 'grid' ? 'primary' : ''" @click="viewMode = 'grid'">
                <el-icon>
                  <Grid />
                </el-icon>
              </el-button>
            </el-button-group>
          </div>
        </div>
      </template>

      <div v-if="searching" class="loading-container">
        <el-skeleton :rows="5" animated />
      </div>

      <div v-else-if="searchResults.length === 0" class="no-results">
        <el-empty description="未找到匹配的文档">
          <el-button type="primary" @click="resetForm">重新搜索</el-button>
        </el-empty>
      </div>

      <!-- 列表视图 -->
      <div v-else-if="viewMode === 'list'" class="results-list">
        <div v-for="document in sortedResults" :key="document.documentId" class="result-item"
          @click="openDocument(document)">
          <div class="result-icon">
            <el-icon>
              <Document />
            </el-icon>
          </div>
          <div class="result-content">
            <h4 class="result-title" v-html="highlightKeyword(document.documentName)"></h4>
            <p class="result-description" v-html="highlightKeyword(document.documentDescription || '暂无描述')"></p>
            <div class="result-meta">
              <span class="meta-item">
                <el-icon>
                  <User />
                </el-icon>
                {{ document.creatorUsername }}
              </span>
              <span class="meta-item">
                <el-icon>
                  <Calendar />
                </el-icon>
                {{ formatDate(document.createdAt) }}
              </span>
              <span class="meta-item">
                <el-icon>
                  <Folder />
                </el-icon>
                {{ getSpaceName(document.spaceId) }}
              </span>
              <span class="meta-item">
                <el-tag size="small" :type="getTypeTagType(document.documentType)">
                  {{ getTypeLabel(document.documentType) }}
                </el-tag>
              </span>
            </div>
          </div>
          <div class="result-actions">
            <el-button size="small" @click.stop="previewDocument(document)">
              <el-icon>
                <View />
              </el-icon>
              预览
            </el-button>
            <el-button size="small" @click.stop="editDocument(document)">
              <el-icon>
                <Edit />
              </el-icon>
              编辑
            </el-button>
            <el-dropdown @command="handleDocumentAction" @click.stop>
              <el-button size="small">
                <el-icon>
                  <MoreFilled />
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="{ action: 'favorite', document }">
                    收藏
                  </el-dropdown-item>
                  <el-dropdown-item :command="{ action: 'share', document }">
                    分享
                  </el-dropdown-item>
                  <el-dropdown-item :command="{ action: 'download', document }">
                    下载
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>

      <!-- 网格视图 -->
      <div v-else class="results-grid">
        <div v-for="document in sortedResults" :key="document.documentId" class="result-card"
          @click="openDocument(document)">
          <div class="card-header">
            <div class="doc-icon">
              <el-icon>
                <Document />
              </el-icon>
            </div>
            <el-dropdown @command="handleDocumentAction" @click.stop>
              <el-button size="small" text>
                <el-icon>
                  <MoreFilled />
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="{ action: 'favorite', document }">
                    收藏
                  </el-dropdown-item>
                  <el-dropdown-item :command="{ action: 'share', document }">
                    分享
                  </el-dropdown-item>
                  <el-dropdown-item :command="{ action: 'download', document }">
                    下载
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="card-content">
            <h4 class="card-title" v-html="highlightKeyword(document.documentName)"></h4>
            <p class="card-description" v-html="highlightKeyword(document.documentDescription || '暂无描述')"></p>
          </div>
          <div class="card-footer">
            <div class="card-meta">
              <span>{{ document.creatorUsername }}</span>
              <span>{{ formatDate(document.createdAt) }}</span>
            </div>
            <el-tag size="small" :type="getTypeTagType(document.documentType)">
              {{ getTypeLabel(document.documentType) }}
            </el-tag>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-container" v-if="searchResults.length > pageSize">
        <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="searchResults.length"
          layout="total, prev, pager, next, jumper" @current-change="handlePageChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { documentApi, documentFolderApi, knowledgeSpaceApi } from '@/api/knowledge'
import { useUserStore } from '@/stores/user'

export default {
  name: 'AdvancedSearch',
  props: {
    spaceId: {
      type: Number,
      default: null
    }
  },
  emits: ['close', 'document-selected'],
  setup(props, { emit }) {
    const router = useRouter()
    const userStore = useUserStore()

    // 响应式数据
    const searchForm = reactive({
      keyword: '',
      spaceId: props.spaceId || null, // 保持传入的spaceId，如果没有则为null（全部空间）
      documentType: '', // 空字符串表示全部文档类型
      creatorUsername: '', // 空字符串表示全部创建者
      folderId: null, // null表示根目录
      startDate: '', // 空字符串表示不限制开始时间
      endDate: '', // 空字符串表示不限制结束时间
      searchScope: ['title', 'content'] // 默认搜索标题和内容
    })

    const dateRange = ref([])
    const spaces = ref([])
    const folderTree = ref([])
    const suggestions = ref([])
    const searchResults = ref([])
    const searchTemplates = ref([])
    const hasSearched = ref(false)
    const searching = ref(false)
    const loadingSuggestions = ref(false)
    const viewMode = ref('list') // list, grid
    const sortBy = ref('relevance')
    const currentPage = ref(1)
    const pageSize = ref(20)

    // 级联选择器配置
    const cascaderProps = {
      value: 'folderId',
      label: 'folderName',
      children: 'children',
      checkStrictly: true
    }

    // 计算属性
    const sortedResults = computed(() => {
      let results = [...searchResults.value]

      switch (sortBy.value) {
        case 'createdAt':
          results.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
          break
        case 'updatedAt':
          results.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
          break
        case 'documentName':
          results.sort((a, b) => a.documentName.localeCompare(b.documentName))
          break
        default:
          // 保持原有顺序（相关性）
          break
      }

      // 分页
      const start = (currentPage.value - 1) * pageSize.value
      const end = start + pageSize.value
      return results.slice(start, end)
    })

    // 方法
    const loadSpaces = async () => {
      try {
        const response = await knowledgeSpaceApi.getSpaces(userStore.user.username)
        spaces.value = response.data
      } catch (error) {
        console.error('加载空间列表失败:', error)
      }
    }

    const loadFolderTree = async (spaceId) => {
      if (!spaceId) {
        folderTree.value = []
        return
      }

      try {
        const response = await documentFolderApi.getFolderTree(spaceId, userStore.user.username)
        // 添加根目录选项
        const rootFolder = {
          folderId: null,
          folderName: '根目录',
          children: response.data || []
        }
        folderTree.value = [rootFolder]

        // 默认选择根目录
        if (!searchForm.folderId) {
          searchForm.folderId = null
        }
      } catch (error) {
        console.error('加载文件夹树失败:', error)
      }
    }

    const onSpaceChange = (spaceId) => {
      searchForm.folderId = null // 重置为根目录
      loadFolderTree(spaceId)
    }

    const onDateRangeChange = (dates) => {
      if (dates && dates.length === 2) {
        searchForm.startDate = dates[0]
        searchForm.endDate = dates[1]
      } else {
        searchForm.startDate = ''
        searchForm.endDate = ''
      }
    }

    const showSuggestions = async () => {
      if (!searchForm.keyword.trim() || !searchForm.spaceId) {
        ElMessage.warning('请输入关键词并选择知识空间')
        return
      }

      loadingSuggestions.value = true
      try {
        const response = await documentApi.getSearchSuggestions(
          searchForm.keyword,
          searchForm.spaceId,
          userStore.user.username
        )
        suggestions.value = response.data
      } catch (error) {
        ElMessage.error('获取搜索建议失败: ' + error.message)
      } finally {
        loadingSuggestions.value = false
      }
    }

    const applySuggestion = (suggestion) => {
      searchForm.keyword = suggestion
      suggestions.value = []
      performSearch()
    }

    const performSearch = async () => {
      if (!searchForm.keyword.trim() && !searchForm.creatorUsername && !searchForm.documentType) {
        ElMessage.warning('请至少输入一个搜索条件')
        return
      }

      searching.value = true
      hasSearched.value = true
      currentPage.value = 1

      try {
        const params = {
          keyword: searchForm.keyword || undefined,
          spaceId: searchForm.spaceId,
          username: userStore.user.username,
          creatorUsername: searchForm.creatorUsername || undefined,
          documentType: searchForm.documentType || undefined,
          folderId: searchForm.folderId || undefined,
          startDate: searchForm.startDate || undefined,
          endDate: searchForm.endDate || undefined
        }

        // 根据搜索范围选择不同的API
        let response
        if (searchForm.searchScope.length === 1) {
          const scope = searchForm.searchScope[0]
          if (scope === 'title') {
            response = await documentApi.searchDocumentsByTitle(
              searchForm.keyword,
              searchForm.spaceId,
              userStore.user.username
            )
          } else if (scope === 'content') {
            // 内容搜索主要针对txt和md格式文档
            response = await documentApi.searchDocumentsByContent(
              searchForm.keyword,
              searchForm.spaceId,
              userStore.user.username
            )
          } else {
            response = await documentApi.advancedSearchDocuments(params)
          }
        } else {
          // 综合搜索，包含txt和md文档的内容搜索
          response = await documentApi.advancedSearchDocuments(params)
        }

        searchResults.value = response.data

        if (searchResults.value.length === 0) {
          ElMessage.info('未找到匹配的文档')
        }
      } catch (error) {
        ElMessage.error('搜索失败: ' + error.message)
        searchResults.value = []
      } finally {
        searching.value = false
      }
    }

    const resetForm = () => {
      Object.assign(searchForm, {
        keyword: '',
        spaceId: props.spaceId || null, // 保持传入的spaceId，如果没有则为null（全部空间）
        documentType: '', // 空字符串表示全部文档类型
        creatorUsername: '', // 空字符串表示全部创建者
        folderId: null, // null表示根目录
        startDate: '', // 空字符串表示不限制开始时间
        endDate: '', // 空字符串表示不限制结束时间
        searchScope: ['title', 'content'] // 默认搜索标题和内容
      })
      dateRange.value = [] // 清空日期范围选择器
      suggestions.value = []
      searchResults.value = []
      hasSearched.value = false
      currentPage.value = 1
    }

    const sortResults = () => {
      currentPage.value = 1
    }

    const handlePageChange = (page) => {
      currentPage.value = page
    }

    const openDocument = (document) => {
      emit('document-selected', document)
    }

    const previewDocument = (document) => {
      // 在新窗口打开预览
      const previewUrl = `/knowledge/space/${document.spaceId}/document/${document.documentId}/preview`
      window.open(previewUrl, '_blank')
    }

    const editDocument = (document) => {
      router.push(`/knowledge/space/${document.spaceId}/document/${document.documentId}/edit`)
    }

    const handleDocumentAction = async ({ action, document }) => {
      switch (action) {
        case 'favorite':
          try {
            await documentApi.addToFavorites(document.documentId, userStore.user.username)
            ElMessage.success('已添加到收藏')
          } catch (error) {
            ElMessage.error('收藏失败: ' + error.message)
          }
          break
        case 'share':
          // 实现分享功能
          ElMessage.info('分享功能开发中')
          break
        case 'download':
          // 实现下载功能
          ElMessage.info('下载功能开发中')
          break
      }
    }

    const saveSearchTemplate = async () => {
      const templateName = await ElMessageBox.prompt('请输入模板名称', '保存搜索模板', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.{1,50}$/,
        inputErrorMessage: '模板名称长度应在1-50个字符之间'
      })

      if (!templateName.value) return

      const template = {
        id: Date.now(),
        name: templateName.value,
        searchForm: { ...searchForm }
      }

      searchTemplates.value.push(template)
      // 这里可以保存到本地存储或服务器
      localStorage.setItem('searchTemplates', JSON.stringify(searchTemplates.value))

      ElMessage.success('搜索模板保存成功')
    }

    const loadSearchTemplate = (template) => {
      Object.assign(searchForm, template.searchForm)
      if (searchForm.startDate && searchForm.endDate) {
        dateRange.value = [searchForm.startDate, searchForm.endDate]
      }
      if (searchForm.spaceId) {
        loadFolderTree(searchForm.spaceId)
      }
      ElMessage.success(`已加载模板: ${template.name}`)
    }

    const highlightKeyword = (text) => {
      if (!searchForm.keyword || !text) return text
      const regex = new RegExp(`(${searchForm.keyword})`, 'gi')
      return text.replace(regex, '<mark>$1</mark>')
    }

    const getSpaceName = (spaceId) => {
      const space = spaces.value.find(s => s.spaceId === spaceId)
      return space ? space.spaceName : '未知空间'
    }

    const getTypeLabel = (type) => {
      const typeMap = {
        markdown: 'Markdown',
        text: '文本',
        docx: 'Word',
        pdf: 'PDF'
      }
      return typeMap[type] || type
    }

    const getTypeTagType = (type) => {
      const typeMap = {
        markdown: 'primary',
        text: 'success',
        docx: 'warning',
        pdf: 'danger'
      }
      return typeMap[type] || ''
    }

    const formatDate = (date) => {
      if (!date) return ''
      return new Date(date).toLocaleDateString('zh-CN')
    }

    // 生命周期
    onMounted(() => {
      loadSpaces()

      // 如果传入了spaceId，则加载对应的文件夹树
      if (props.spaceId) {
        loadFolderTree(props.spaceId)
      }

      // 加载保存的搜索模板
      const savedTemplates = localStorage.getItem('searchTemplates')
      if (savedTemplates) {
        try {
          searchTemplates.value = JSON.parse(savedTemplates)
        } catch (error) {
          console.error('加载搜索模板失败:', error)
        }
      }
    })

    return {
      searchForm,
      dateRange,
      spaces,
      folderTree,
      suggestions,
      searchResults,
      searchTemplates,
      hasSearched,
      searching,
      loadingSuggestions,
      viewMode,
      sortBy,
      currentPage,
      pageSize,
      cascaderProps,
      sortedResults,
      onSpaceChange,
      onDateRangeChange,
      showSuggestions,
      applySuggestion,
      performSearch,
      resetForm,
      sortResults,
      handlePageChange,
      openDocument,
      previewDocument,
      editDocument,
      handleDocumentAction,
      saveSearchTemplate,
      loadSearchTemplate,
      highlightKeyword,
      getSpaceName,
      getTypeLabel,
      getTypeTagType,
      formatDate
    }
  }
}
</script>

<style scoped>
.advanced-search-container {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.search-form-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  padding: 10px 0;
}

.suggestions-card {
  margin-bottom: 20px;
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.suggestion-tag {
  cursor: pointer;
  transition: all 0.3s;
}

.suggestion-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.results-card {
  min-height: 400px;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.result-actions .el-select {
  min-width: 18px;
}

.result-actions .el-button-group {
  flex-shrink: 0;
}

.result-actions .el-button-group .el-button {
  min-width: 28px;
  padding: 8px 12px;
}

.loading-container {
  padding: 20px;
}

.no-results {
  padding: 40px;
  text-align: center;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.result-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  cursor: pointer;
  transition: all 0.3s;
}

.result-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.1);
}

.result-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f9ff;
  border-radius: 8px;
  color: #409eff;
  font-size: 20px;
}

.result-content {
  flex: 1;
  min-width: 0;
}

.result-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
}

.result-title :deep(mark) {
  background: #fff3cd;
  color: #856404;
  padding: 2px 4px;
  border-radius: 3px;
}

.result-description {
  margin: 0 0 12px 0;
  color: #606266;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.result-description :deep(mark) {
  background: #fff3cd;
  color: #856404;
  padding: 2px 4px;
  border-radius: 3px;
}

.result-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
}

.result-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.result-card {
  background: white;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.result-card:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.1);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 0 16px;
}

.doc-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f9ff;
  border-radius: 6px;
  color: #409eff;
  font-size: 16px;
}

.card-content {
  padding: 12px 16px;
}

.card-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-title :deep(mark) {
  background: #fff3cd;
  color: #856404;
  padding: 1px 3px;
  border-radius: 2px;
}

.card-description {
  margin: 0;
  font-size: 12px;
  color: #606266;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-description :deep(mark) {
  background: #fff3cd;
  color: #856404;
  padding: 1px 3px;
  border-radius: 2px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
}

.card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: #909399;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e4e7ed;
}
</style>